<template>
  <view class="bd">
    <view class="topArea flex bd1">
      <view class="flex flex-al-c">
        <image
          src="../../../../static/img/child-plan.png"
          mode="aspectFit"
          style="width: 50upx; height: 50upx"
        >
        </image>
        <view style="font-size: 38upx">全龄儿保计划</view>
      </view>
      <view style="height: 40upx"></view>
      <view style="font-size: 22upx"> 当前所在社区：{{ sq }} </view>
    </view>

    <view class="c-list">
      <view
        class="c-item uni-item-line"
        style="padding: 30upx 30upx 20upx 40upx"
        v-for="(v, index) in list"
        :key="v.id"
        @click="goDetail(v)"
      >
        <view class="flex flex-j-b">
          <view
            style="font-size: 34upx; font-weight: 900; color: #444"
            class="t1"
            >{{ v.planName }}</view
          >
          <view class="flex">
            <view>
              <!-- <u-switch v-model="v.checkType" active-color="#18C7E1" @change="goEdit(index,v)"></u-switch> -->
              <mySwitch
                :switchList="['未完成', '已完成']"
                :defaultSwitch="v.checkType == 0 ? true : false"
                :isShowModal="false"
                @change="goEdit(index, v)"
              ></mySwitch>
            </view>
          </view>
        </view>
        <view
          v-if="v.checkType == 1 && v.record"
          style="margin-top: 20upx; color: #888"
          @click="goDetail(v)"
        >
          <div style="display: flex; justify-content: flex-start" class="t1">
            <view style="margin-right: 10upx; font-size: 12px"
              >身高 {{ v.record.height }}cm</view
            >
            <view style="margin-right: 10upx; font-size: 12px"
              >体重 {{ v.record.weight }}kg</view
            >
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.planAgeMonth < 12"
              >头围 {{ v.record.headCircumference }}cm
            </view>
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.record.isNormal == '0' && v.planAgeMonth >= 36"
              >视力情况：正常
            </view>
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.record.isNormal == '1' && v.planAgeMonth >= 36"
              >视力情况：近视
            </view>
          </div>
          <div style="display: flex; justify-content: flex-start" class="t1">
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.planAgeMonth >= 36 && v.record.isNormal == '0'"
              >视力(左): {{ v.record.vision }}</view
            >
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.planAgeMonth >= 36 && v.record.isNormal == '0'"
              >视力(右):
              {{ v.record.rightVision }}
            </view>
          </div>
          <div style="display: flex; justify-content: flex-start" class="t1">
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.planAgeMonth >= 36 && v.record.isNormal == '1'"
              >左眼近视度数:
              {{ v.record.leftMyopiaVision }}
            </view>
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.planAgeMonth >= 36 && v.record.isNormal == '1'"
              >右眼近视度数:
              {{ v.record.rightMyopiaVision }}
            </view>
          </div>
          <div style="display: flex; justify-content: flex-start" class="t1">
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.planAgeMonth >= 36 && v.record.isNormal == '1'"
              >左眼散光度数:
              {{ v.record.leftAstVision }}
            </view>
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.planAgeMonth >= 36 && v.record.isNormal == '1'"
              >右眼散光度数:
              {{ v.record.rightAstVision }}
            </view>
          </div>
          <div style="display: flex; justify-content: flex-start" class="t1">
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.record.checkWarn == 0"
              >其他指标：正常</view
            >
            <view
              style="margin-right: 10upx; font-size: 12px"
              v-if="v.record.checkWarn == 1"
              >其他指标：异常</view
            >
          </div>
        </view>
        <view
          v-else
          style="margin-top: 20upx; color: #888"
          v-html="v.sketch"
          @click="goDetail(v)"
        />
      </view>
      <u-popup
        v-model="popup"
        mode="bottom"
        :mask-custom-style="objc"
        @close="closepopup()"
      >
        <view class="bd1 t1">
          <view class="inp-group flex flex-al-c">
            <view class="inp-title">身高(CM)</view>
            <u-input
              v-model="child.height"
              type="number"
              :border="true"
              placeholder="请输入身高"
              @input="checkNum($event, 1)"
            />
          </view>
          <view class="inp-group flex flex-al-c">
            <view class="inp-title">体重(KG)</view>
            <u-input
              v-model="child.weight"
              type="number"
              :border="true"
              placeholder="请输入体重"
              @input="checkNum($event, 2)"
            />
          </view>
          <view class="inp-group flex flex-al-c" v-if="agemonth < 12">
            <view class="inp-title">头围(CM)</view>
            <u-input
              v-model="child.headCircumference"
              type="number"
              :border="true"
              placeholder="请输入头围"
              @input="checkNum($event, 3)"
            />
          </view>
          <view class="inp-group flex flex-al-c" v-if="agemonth >= 36">
            <view class="inp-title">视力情况</view>
            <view
              class="gravid"
              style="margin-right: 100upx"
              :class="{ active: isok }"
              @click="selone()"
              >◉ 正常</view
            >
            <view class="gravid" :class="{ active: !isok }" @click="selone1()"
              >◉ 近视</view
            >
          </view>
          <view v-if="isok">
            <view class="inp-group flex flex-al-c" v-if="agemonth >= 36">
              <view class="inp-title">左眼视力</view>
              <u-input
                v-model="child.vision"
                type="number"
                :border="true"
                placeholder="请输入视力(如5.0)"
                @input="checkNum($event, 4)"
              />
            </view>
            <view class="inp-group flex flex-al-c" v-if="agemonth >= 36">
              <view class="inp-title">右眼视力</view>
              <u-input
                v-model="child.rightVision"
                type="number"
                :border="true"
                placeholder="请输入视力(如5.0)"
                @input="checkNum($event, 5)"
              />
            </view>
          </view>
          <view v-if="!isok">
            <view class="inp-group flex flex-al-c" v-if="agemonth >= 36">
              <view class="inp-title">左眼近视度数</view>
              <u-input
                v-model="child.leftMyopiaVision"
                type="number"
                :border="true"
                placeholder="请输入对应度数（如300)"
                @input="checkNum($event, 6)"
              />
            </view>
            <view class="inp-group flex flex-al-c" v-if="agemonth >= 36">
              <view class="inp-title">左眼散光度数</view>
              <u-input
                v-model="child.leftAstVision"
                type="number"
                :border="true"
                placeholder="请输入对应度数（如300)"
                @input="checkNum($event, 7)"
              />
            </view>
            <view class="inp-group flex flex-al-c" v-if="agemonth >= 36">
              <view class="inp-title">右眼近视度数</view>
              <u-input
                v-model="child.rightMyopiaVision"
                type="number"
                :border="true"
                placeholder="请输入对应度数（如300)"
                @input="checkNum($event, 8)"
              />
            </view>
            <view class="inp-group flex flex-al-c" v-if="agemonth >= 36">
              <view class="inp-title">右眼散光度数</view>
              <u-input
                v-model="child.rightAstVision"
                type="number"
                :border="true"
                placeholder="请输入对应度数（如300)"
                @input="checkNum($event, 9)"
              />
            </view>
          </view>
          <view class="inp-group flex flex-al-c">
            <view class="inp-title" style="width: 128rpx"
              >其他指标是否异常</view
            >
            <u-switch
              v-model="checked2"
              @change="checked2Change()"
              active-color="#18C7E1"
              inactive-color="#eee"
              style="margin-left: 72rpx"
            ></u-switch>
          </view>
          <view class="inp-group flex flex-al-c" v-if="showRemarkNote">
            <view class="inp-title">异常说明</view>
            <u-input
              v-model="child.remarkNote"
              type="textarea"
              :border="true"
              placeholder="请输入异常说明"
            />
          </view>
          <view style="width: 90%; margin: 50upx auto 50upx">
            <button
              type="default"
              style="background: #18c7e1; color: #fff"
              @click="subUserInfo"
            >
              保存
            </button>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>
<script>
import mySwitch from "@/components/xuan-switch/xuan-switch.vue";
export default {
  components: {
    mySwitch,
  },
  data() {
    return {
      isok: true, //视力
      page: {},
      list: [],
      checked: false,
      popup: false,
      checked2: false,
      showRemarkNote: false,
      agemonth: "", //存放月龄
      child: {
        id: "", //计划id
        height: 0,
        weight: 0,
        headCircumference: 0, // 头围
        vision: 0, // 视力
        rightVision: 0, // 右视力
        checkWarn: 0, // 是否异常
        remarkNote: 0, // 异常说明
        isNormal: 0, //是否正常
        leftAstVision: 0, //左眼散光度数
        leftMyopiaVision: 0, //左眼近视度数
        rightAstVision: 0, //右眼散光度数
        rightMyopiaVision: 0, // 右眼近视度数
      },
      objc: {
        backgroundColor: "rgba(0,0,0,0.1)",
      },
      sq: "",
    };
  },
  onReachBottom() {
    //console.log('触底了')
    if (this.page.isLastPage) return;
    this.getAllPlanMore(this.page.pageNum + 1);
  },
  onLoad() {
    this.getAllPlan();
    this.shequ();
  },
  watch: {
    checked(val) {
      // 等于false，意味着用户手动关闭了switch
      if (val == false) {
        if (this.controlStatus == true) {
          this.controlStatus = false;
          return;
        }
        // 重新打开switch，并让它处于加载中的状态
        this.checked = true;
        this.loading = true;
        // 模拟向后端发起请求
        this.getRestultFromServer();
      }
    },
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    selone() {
      this.isok = true;
      this.child.isNormal = 0;
    },
    selone1() {
      this.isok = false;
      this.child.isNormal = 1;
    },
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    checkNum(e, type) {
      let val = e.replace(/(^\s*)|(\s*$)/g, "");
      if (!val) {
        if (type == 1) {
          this.child.height = "";
        } else if (type == 2) {
          this.child.weight = "";
        } else if (type == 3) {
          this.child.headCircumference = "";
        } else if (type == 4) {
          this.child.vision = "";
        } else {
          this.child.rightVision = "";
        }
        e;
        return;
      }
      var reg = /[^\d.]/g;
      // 只能是数字和小数点，不能是其他输入
      val = val.replace(reg, "");
      // // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, "");
      // // 小数只能出现1位
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      // // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      this.$nextTick(() => {
        if (type == 1) {
          this.child.height = val;
        } else if (type == 2) {
          this.child.weight = val;
        } else if (type == 3) {
          this.child.headCircumference = val;
        } else if (type == 4) {
          this.child.vision = val;
        } else {
          this.child.rightVision = val;
        }
      });
    },
    //获取社区
    shequ() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/common/getUserInfo/getDeptInfo", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          this.sq = res.data.data.deptName;
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    // 获取接种计划
    getAllPlan(pageNumber) {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/childrenInfo/getChildCarePlan", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          //console.log(res)
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = res.data.data.list;
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    getAllPlanMore(pageNumber) {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/childrenInfo/getChildCarePlan", {
          pageNum: pageNumber ? pageNumber : 1,
          pageSize: "10",
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.page = res.data.data;
            self.list = self.list.concat(res.data.data.list);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 儿童保健详情
    goDetail(v) {
      uni.navigateTo({
        url: "/pages/main/child/backlog/plan-detail?id=" + v.id,
      });
    },
    goEdit(i, e) {
      this.isok = true;
      if (e.checkType == 0) {
        this.child = {
          id: "", //计划id
          height: "",
          weight: "",
          headCircumference: "", // 头围
          vision: "", // 视力
          isNormal: 0, //是否正常
          rightVision: "", // 右视力
          checkWarn: "", // 是否异常
          remarkNote: "", // 异常说明
        };
        this.agemonth = this.list[i].planAgeMonth;
        this.child.id = this.list[i].id;
        this.popup = true;
      } else {
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/childrenInfo/childHealthCheckRecord", {
            height: 0,
            weight: 0,
            headCircumference: 0,
            vision: 0,
            rightVision: "", // 右视力
            checkType: 0,
            checkWarn: 0,
            remarkNote: "",
            childCarePlanId: e.id,
            age: this.config.globalData.user.age,
          })
          .then((res) => {
            uni.hideLoading();
            if (res.data.code === 200) {
              this.getAllPlan();
              setTimeout((s) => {
                uni.showToast({
                  title: res.data.msg,
                  icon: "none",
                });
              }, 500);
            } else {
              uni.showToast({
                title: this.config.handleError(res.data),
                icon: "none",
              });
            }
          });
      }
    },
    // 点击是否异常
    checked2Change() {
      if (this.checked2) {
        this.showRemarkNote = true;
      } else {
        this.showRemarkNote = false;
      }
    },
    shows() {
      uni.showToast({
        title: "请输入信息",
        icon: "none",
      });
      return false;
    },
    valid() {
      if (!this.child.height) {
        this.shows();
      }
      if (!this.child.weight) {
        this.shows();
      }
      if (this.agemonth <= 8 && !this.child.headCircumference) {
        this.shows();
      }
      if (this.agemonth > 36 && !this.child.vision) {
        this.shows();
      }
      if (this.agemonth > 36 && !this.child.rightVision) {
        this.shows();
      }
      /* if(this.config.globalData.user.age<=3&&!this.child.headCircumference) return false;
				if(this.config.globalData.user.age>3&&!this.child.vision) return false; */
      const reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
      if (!reg.test(this.child.height)) {
        uni.showToast({
          title: "请输入正确的身高，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.child.height < 10 || this.child.height > 200) {
        uni.showToast({
          title: "身高的范围在10-200之间",
          icon: "none",
        });
        return;
      }
      if (!reg.test(this.child.weight)) {
        uni.showToast({
          title: "请输入正确的体重，如有小数请保留至后两位小数",
          icon: "none",
        });
        return;
      }
      if (this.child.weight < 0 || this.child.weight > 200) {
        uni.showToast({
          title: "体重的范围在0-200之间",
          icon: "none",
        });
        return;
      }
      if (this.agemonth <= 8) {
        if (!reg.test(this.child.headCircumference)) {
          uni.showToast({
            title: "请输入正确的头围，如有小数请保留至后两位小数",
            icon: "none",
          });
          return;
        }
        if (
          this.child.headCircumference < 30 ||
          this.child.headCircumference > 60
        ) {
          uni.showToast({
            title: "头围的范围在30-60之间",
            icon: "none",
          });
          return;
        }
      }
      if (this.agemonth >= 36 && this.child.isNormal == 0) {
        if (!reg.test(this.child.vision)) {
          uni.showToast({
            title: "请输入正确的左视力，如有小数请保留至后两位小数",
            icon: "none",
          });
          return;
        }
        if (this.child.vision < 1 || this.child.vision > 6) {
          uni.showToast({
            title: "视力的范围在1-6之间",
            icon: "none",
          });
          return;
        }
        if (!reg.test(this.child.rightVision)) {
          uni.showToast({
            title: "请输入正确的右视力，如有小数请保留至后两位小数",
            icon: "none",
          });
          return;
        }
        if (this.child.rightVision < 1 || this.child.rightVision > 6) {
          uni.showToast({
            title: "视力的范围在1-6之间",
            icon: "none",
          });
          return;
        }
      }

      if (this.agemonth >= 36 && this.child.isNormal == 1) {
        if (
          !this.child.leftMyopiaVision ||
          !(this.child.leftMyopiaVision > 0)
        ) {
          uni.showToast({
            title: "请输入合理的左眼近视度数",
            icon: "none",
          });
          return;
        }
        if (!this.child.leftAstVision || !(this.child.leftAstVision > 0)) {
          uni.showToast({
            title: "请输入合理的左眼散光度数",
            icon: "none",
          });
          return;
        }
        if (!this.child.rightAstVision || !(this.child.rightAstVision > 0)) {
          uni.showToast({
            title: "请输入合理的右眼散光度数",
            icon: "none",
          });
          return;
        }
        if (
          !this.child.rightMyopiaVision ||
          !(this.child.rightMyopiaVision > 0)
        ) {
          uni.showToast({
            title: "请输入合理的右眼散光度数",
            icon: "none",
          });
          return;
        }
      }
      return true;
    },
    subUserInfo() {
      if (!this.valid()) return;
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/childrenInfo/childHealthCheckRecord", {
          height: this.child.height,
          weight: this.child.weight,
          headCircumference: this.child.headCircumference,
          vision: this.child.vision,
          rightVision: this.child.rightVision,
          checkType: this.checkType ? 0 : 2,
          checkWarn: this.checked2 ? "1" : "0",
          remarkNote: this.child.remarkNote,
          childCarePlanId: this.child.id,
          age: this.config.globalData.user.age,
          isNormal: this.child.isNormal,
          leftAstVision: this.child.leftAstVision || 0,
          leftMyopiaVision: this.child.leftMyopiaVision || 0,
          rightAstVision: this.child.rightAstVision || 0,
          rightMyopiaVision: this.child.rightMyopiaVision || 0,
        })
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            self.popup = false;

            self.getAllPlan();
            setTimeout((s) => {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
              });
            }, 500);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    closepopup() {
      this.list = [];
      this.getAllPlan();
    },
  },
};
</script>

<style lang="less" scoped>
.topArea {
  background-color: #18c7e1;
  color: #fff;
  flex-direction: column;
  align-items: center;
  padding: 40upx 0;
}

.inp-group {
  padding: 0 20upx;
  margin: 30upx 0;

  .inp-title {
    width: 200upx;
  }
}

.title {
  padding: 20upx 50upx;
  background-color: #eee;

  .txt {
    padding: 0 20upx;
    border-left: 8upx solid #18c7e1;
  }
}

.art {
  padding: 30upx 50upx;
  line-height: 46upx;
}

.gravid {
  color: #999;
  font-size: 34upx;
}

.gravid.active {
  color: #18c7e1;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }

  .bd1 {
    background-color: #38383c !important;
  }

  .t1 {
    color: #ccc !important;
  }

  >>> input {
    color: #ccc !important;
  }
  >>> textarea {
    color: #ccc !important;
  }
}
</style>
